<template>
  <div class="ad-income-log">
    <el-card>
      <div slot="header" class="clearfix">
        <span class="page-title">
          <i class="el-icon-document"></i>
          广告观看收益日志
        </span>
        <div class="header-actions">
          <el-button style="float: right; padding: 3px 0" type="text" @click="loadData">刷新数据</el-button>
        </div>
      </div>

      <!-- 搜索筛选 -->
      <div class="search-form">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="用户ID">
            <el-input
              v-model="searchForm.userId"
              placeholder="请输入用户ID"
              clearable
              style="width: 150px">
            </el-input>
          </el-form-item>
          <el-form-item label="商家ID">
            <el-input
              v-model="searchForm.merchantId"
              placeholder="请输入商家ID"
              clearable
              style="width: 150px">
            </el-input>
          </el-form-item>
          <el-form-item label="广告平台">
            <el-select v-model="searchForm.adPlatform" placeholder="请选择平台" clearable style="width: 150px">
              <el-option label="塔库" value="taku"></el-option>
              <el-option label="穿山甲" value="pangolin"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="广告类型">
            <el-select v-model="searchForm.adType" placeholder="请选择类型" clearable style="width: 150px">
              <el-option label="开屏" value="splash"></el-option>
              <el-option label="视频" value="video"></el-option>
              <el-option label="横幅" value="banner"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否完整观看">
            <el-select v-model="searchForm.isComplete" placeholder="请选择" clearable style="width: 120px">
              <el-option label="是" :value="1"></el-option>
              <el-option label="否" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开始时间">
            <el-date-picker
              v-model="searchForm.beginTime"
              type="datetime"
              placeholder="选择开始时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 180px">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker
              v-model="searchForm.endTime"
              type="datetime"
              placeholder="选择结束时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 180px">
            </el-date-picker>
          </el-form-item>
          <el-form-item class="search-form-item">
            <el-button type="primary" @click="handleSearch" icon="el-icon-search">查询</el-button>
            <el-button @click="handleReset" icon="el-icon-refresh">重置</el-button>
            <el-button type="success" @click="handleExport" icon="el-icon-download">导出</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 可配置表格（集成分页） -->
      <configurable-table
        :columns="tableColumns"
        :data="tableData"
        :loading="loading"
        :show-pagination="true"
        :current-page.sync="pagination.current"
        :page-size.sync="pagination.size"
        :pagination-total="pagination.total"
        @page-change="loadData"
        border
        stripe>
        <!-- 广告平台列 -->
        <template #adPlatform="{ row }">
          <el-tag :type="getPlatformType(row.adPlatform)" size="small">
            {{ getPlatformText(row.adPlatform) }}
          </el-tag>
        </template>

        <!-- 广告类型列 -->
        <template #adType="{ row }">
          <el-tag type="info" size="small">
            {{ getAdTypeText(row.adType) }}
          </el-tag>
        </template>

        <!-- 是否完整观看列 -->
        <template #isComplete="{ row }">
          <el-tag :type="row.isComplete === 1 ? 'success' : 'warning'" size="small">
            {{ row.isComplete === 1 ? '是' : '否' }}
          </el-tag>
        </template>

        <!-- 收益金额列 -->
        <template #rewardAmount="{ row }">
          <span class="amount-value" style="color: #67C23A; font-weight: bold;">
            ¥{{ formatAmount(row.rewardAmount) }}
          </span>
        </template>

        <!-- 原始奖励积分列 -->
        <template #rewardPoints="{ row }">
          <span class="points-value" style="color: #909399; font-weight: 500;">
            {{ formatPoints(row.rewardPoints) }}
          </span>
        </template>

        <!-- 用户最终收益列 -->
        <template #userActualIncome="{ row }">
          <div v-if="row.userActualIncome !== undefined && row.userActualIncome !== null">
            <div style="color: #409EFF; font-weight: bold; margin-bottom: 2px;">
              {{ formatPoints(row.userActualIncome) }} 积分
            </div>
            <div style="color: #67C23A; font-size: 12px;">
              ≈ ¥{{ formatAmount(row.userActualIncomeYuan || (row.userActualIncome / 100)) }}
            </div>
          </div>
          <span v-else style="color: #C0C4CC;">-</span>
        </template>

        <!-- 观看时长列 -->
        <template #watchDuration="{ row }">
          {{ row.watchDuration ? row.watchDuration + '秒' : '-' }}
        </template>

        <!-- 操作列 -->
        <template #actions="{ row }">
          <el-button size="mini" @click="handleView(row)">查看</el-button>
        </template>
      </configurable-table>
    </el-card>

    <!-- 详情对话框 -->
    <el-dialog
      title="广告观看收益详情"
      :visible.sync="detailDialogVisible"
      width="800px"
      custom-class="view-dialog">
      <div v-if="detailData" class="detail-content">
        <!-- 基本信息 -->
        <div class="info-section">
          <div class="section-title">
            <i class="el-icon-document"></i>
            <span>基本信息</span>
          </div>
          <el-row :gutter="24" class="info-row">
            <el-col :span="12">
              <div class="info-item">
                <div class="info-label">
                  <i class="el-icon-user"></i>
                  用户ID
                </div>
                <div class="info-value">{{ detailData.userId || '无' }}</div>
              </div>
            </el-col>
            <el-col :span="12" v-if="detailData.userName">
              <div class="info-item">
                <div class="info-label">
                  <i class="el-icon-user-solid"></i>
                  用户名称
                </div>
                <div class="info-value">{{ detailData.userName }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="info-row">
            <el-col :span="12">
              <div class="info-item">
                <div class="info-label">
                  <i class="el-icon-office-building"></i>
                  商家ID
                </div>
                <div class="info-value">{{ detailData.merchantId || '无' }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <div class="info-label">
                  <i class="el-icon-s-shop"></i>
                  商家名称
                </div>
                <div class="info-value">{{ detailData.merchantName || '暂无名称' }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="info-row">
            <el-col :span="12" v-if="detailData.rewardId">
              <div class="info-item">
                <div class="info-label">
                  <i class="el-icon-tickets"></i>
                  奖励ID
                </div>
                <div class="info-value">{{ detailData.rewardId }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <div class="info-label">
                  <i class="el-icon-time"></i>
                  观看时间
                </div>
                <div class="info-value">{{ detailData.watchTime || '无' }}</div>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 广告信息 -->
        <div class="info-section">
          <div class="section-title">
            <i class="el-icon-s-platform"></i>
            <span>广告信息</span>
          </div>
          <el-row :gutter="24" class="info-row">
            <el-col :span="12">
              <div class="info-item">
                <div class="info-label">
                  <i class="el-icon-s-platform"></i>
                  广告平台
                </div>
                <div class="item-value">
                  <el-tag :type="getPlatformType(detailData.adPlatform)" size="medium">
                    {{ getPlatformText(detailData.adPlatform) }}
                  </el-tag>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <div class="info-label">
                  <i class="el-icon-picture"></i>
                  广告类型
                </div>
                <div class="item-value">
                  <el-tag type="info" size="medium">
                    {{ getAdTypeText(detailData.adType) }}
                  </el-tag>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="info-row">
            <el-col :span="12">
              <div class="info-item">
                <div class="info-label">
                  <i class="el-icon-tickets"></i>
                  广告位ID
                </div>
                <div class="item-value">{{ detailData.adId || '无' }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <div class="info-label">
                  <i class="el-icon-video-camera"></i>
                  观看时长
                </div>
                <div class="item-value">{{ detailData.watchDuration ? detailData.watchDuration + '秒' : '无' }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="info-row">
            <el-col :span="12">
              <div class="info-item">
                <div class="info-label">
                  <i class="el-icon-circle-check"></i>
                  是否完整观看
                </div>
                <div class="item-value">
                  <el-tag :type="detailData.isComplete === 1 ? 'success' : 'warning'" size="medium">
                    {{ detailData.isComplete === 1 ? '是' : '否' }}
                  </el-tag>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 收益详情 -->
        <div class="info-section highlight-section">
          <div class="section-title">
            <i class="el-icon-money"></i>
            <span>收益详情</span>
          </div>
          <el-row :gutter="24" class="info-row">
            <el-col :span="12">
              <div class="info-item highlight-item">
                <div class="info-label">
                  <i class="el-icon-coin"></i>
                  原始奖励金额
                </div>
                <div class="item-value price-value" style="font-size: 16px; font-weight: 600; color: #909399;">
                  ¥{{ formatAmount(detailData.rewardAmount) }}
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item highlight-item">
                <div class="info-label">
                  <i class="el-icon-star-on"></i>
                  原始奖励积分
                </div>
                <div class="item-value point-value" style="font-size: 16px; font-weight: 600; color: #909399;">
                  {{ formatPoints(detailData.rewardPoints) }}
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="info-row" v-if="detailData.userActualIncome !== undefined && detailData.userActualIncome !== null">
            <el-col :span="12">
              <div class="info-item highlight-item">
                <div class="info-label">
                  <i class="el-icon-coin"></i>
                  用户最终收益（积分）
                </div>
                <div class="item-value point-value highlight-point" style="font-size: 20px; font-weight: bold; color: #409EFF;">
                  {{ formatPoints(detailData.userActualIncome) }}
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item highlight-item">
                <div class="info-label">
                  <i class="el-icon-money"></i>
                  用户最终收益（元）
                </div>
                <div class="item-value price-value highlight-price" style="font-size: 20px; font-weight: bold; color: #67C23A;">
                  ¥{{ formatAmount(detailData.userActualIncomeYuan || (detailData.userActualIncome / 100)) }}
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="info-row" v-if="detailData.userActualIncome !== undefined && detailData.userActualIncome !== null && detailData.rewardPoints">
            <el-col :span="24">
              <div class="info-item" style="padding: 12px; background: #f0f9ff; border-radius: 4px; border-left: 3px solid #409EFF;">
                <div style="font-size: 13px; color: #606266;">
                  <i class="el-icon-info" style="color: #409EFF; margin-right: 6px;"></i>
                  <span>说明：原始奖励积分 {{ formatPoints(detailData.rewardPoints) }}，用户实际分到 {{ formatPoints(detailData.userActualIncome) }} 积分（{{ ((detailData.userActualIncome / detailData.rewardPoints) * 100).toFixed(2) }}%），其余积分已分配给其他角色。</span>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>

        <!-- 分佣明细 -->
        <div class="info-section" v-if="detailData.commissionList && detailData.commissionList.length > 0">
          <div class="section-title">
            <i class="el-icon-s-finance"></i>
            <span>分佣明细</span>
          </div>
          <el-table
            :data="detailData.commissionList"
            border
            stripe
            size="small"
            style="width: 100%">
            <el-table-column prop="userName" label="接收方" min-width="120">
              <template slot-scope="scope">
                <div>
                  <div style="font-weight: 600; margin-bottom: 4px;">{{ scope.row.userName || '未知' }}</div>
                  <div style="font-size: 12px; color: #909399;">ID: {{ scope.row.userId }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="roleText" label="角色" min-width="100">
              <template slot-scope="scope">
                <el-tag :type="getRoleType(scope.row.roleType)" size="small">
                  {{ scope.row.roleText || getRoleText(scope.row.roleType) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="pointAmount" label="分佣积分" min-width="120" align="right">
              <template slot-scope="scope">
                <span style="color: #409EFF; font-weight: 600;">
                  {{ formatPoints(scope.row.pointAmount) }} 积分
                </span>
                <div style="font-size: 12px; color: #909399; margin-top: 2px;">
                  ≈ ¥{{ formatAmount(scope.row.pointAmount / 100) }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 其他信息 -->
        <div class="info-section" v-if="detailData.ipAddress || detailData.deviceInfo || detailData.remark">
          <div class="section-title">
            <i class="el-icon-info"></i>
            <span>其他信息</span>
          </div>
          <el-row :gutter="24" class="info-row" v-if="detailData.ipAddress">
            <el-col :span="12">
              <div class="info-item">
                <div class="info-label">
                  <i class="el-icon-location"></i>
                  IP地址
                </div>
                <div class="item-value">{{ detailData.ipAddress }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="info-row" v-if="detailData.deviceInfo">
            <el-col :span="12">
              <div class="info-item">
                <div class="info-label">
                  <i class="el-icon-mobile-phone"></i>
                  设备信息
                </div>
                <div class="item-value">{{ detailData.deviceInfo }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="info-row" v-if="detailData.remark">
            <el-col :span="24">
              <div class="info-item">
                <div class="info-label">
                  <i class="el-icon-document"></i>
                  备注
                </div>
                <div class="item-value">{{ detailData.remark }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false" size="medium">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAdWatchLogList, getAdWatchLogDetail } from '@/api/admin/ad-income-log'

export default {
  name: 'AdIncomeLog',
  data() {
    return {
      loading: false,
      searchForm: {
        userId: null,
        merchantId: null,
        adPlatform: null,
        adType: null,
        isComplete: null,
        beginTime: null,
        endTime: null
      },
      includeCommission: true, // 是否包含分佣信息
      tableData: [],
      pagination: {
        current: 1,
        size: 10,
        total: 0
      },
      // 表格列配置（根据接口文档优化）
      tableColumns: [
        {
          prop: 'watchTime',
          label: '观看时间',
          minWidth: 160
        },
        {
          prop: 'userId',
          label: '用户ID',
          minWidth: 100
        },
        {
          prop: 'userName',
          label: '用户名称',
          minWidth: 120,
          showOverflowTooltip: true
        },
        {
          prop: 'merchantId',
          label: '商家ID',
          minWidth: 100
        },
        {
          prop: 'merchantName',
          label: '商家名称',
          minWidth: 150,
          showOverflowTooltip: true
        },
        {
          prop: 'adPlatform',
          label: '广告平台',
          minWidth: 100,
          slot: 'adPlatform'
        },
        {
          prop: 'adType',
          label: '广告类型',
          minWidth: 100,
          slot: 'adType'
        },
        {
          prop: 'adId',
          label: '广告位ID',
          minWidth: 150,
          showOverflowTooltip: true
        },
        {
          prop: 'isComplete',
          label: '完整观看',
          minWidth: 90,
          slot: 'isComplete',
          align: 'center'
        },
        {
          prop: 'watchDuration',
          label: '观看时长',
          minWidth: 100,
          slot: 'watchDuration',
          align: 'right'
        },
        {
          prop: 'rewardAmount',
          label: '原始奖励金额',
          minWidth: 130,
          align: 'right',
          slot: 'rewardAmount'
        },
        {
          prop: 'rewardPoints',
          label: '原始奖励积分',
          minWidth: 130,
          align: 'right',
          slot: 'rewardPoints'
        },
        {
          prop: 'userActualIncome',
          label: '用户最终收益',
          minWidth: 150,
          align: 'right',
          slot: 'userActualIncome'
        },
        {
          prop: 'rewardId',
          label: '奖励ID',
          minWidth: 100
        },
        {
          label: '操作',
          minWidth: 80,
          fixed: 'right',
          slot: 'actions',
          align: 'center'
        }
      ],
      // 详情对话框
      detailDialogVisible: false,
      detailData: null
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    /**
     * 构建查询参数
     */
    buildQueryParams() {
      const params = {}

      // 添加筛选条件
      if (this.searchForm.userId) {
        params.userId = parseInt(this.searchForm.userId)
      }
      if (this.searchForm.merchantId) {
        params.merchantId = parseInt(this.searchForm.merchantId)
      }
      if (this.searchForm.adPlatform) {
        params.adPlatform = this.searchForm.adPlatform
      }
      if (this.searchForm.adType) {
        params.adType = this.searchForm.adType
      }
      if (this.searchForm.isComplete !== null && this.searchForm.isComplete !== '') {
        params.isComplete = this.searchForm.isComplete
      }
      if (this.searchForm.beginTime) {
        params.beginTime = this.searchForm.beginTime
      }
      if (this.searchForm.endTime) {
        params.endTime = this.searchForm.endTime
      }

      // 添加分佣信息参数
      if (this.includeCommission) {
        params.includeCommission = true
      }

      return params
    },

    /**
     * 加载数据
     */
    async loadData() {
      this.loading = true
      try {
        const params = this.buildQueryParams()
        const response = await getAdWatchLogList(params)

        if (response.code === 0) {
          // 接口返回的是数组，不是分页对象
          // 根据接口文档：返回格式为 { code: 0, msg: "success", data: [...] }
          const allData = Array.isArray(response.data) ? response.data : []
          
          // 前端分页处理
          const start = (this.pagination.current - 1) * this.pagination.size
          const end = start + this.pagination.size
          this.tableData = allData.slice(start, end)
          this.pagination.total = allData.length
        } else {
          this.$message.error(response.msg || '加载数据失败')
          this.tableData = []
          this.pagination.total = 0
        }
      } catch (error) {
        console.error('加载广告观看收益日志失败:', error)
        this.$message.error('加载数据失败，请稍后重试')
        this.tableData = []
        this.pagination.total = 0
      } finally {
        this.loading = false
      }
    },

    /**
     * 查询
     */
    handleSearch() {
      this.pagination.current = 1
      this.loadData()
    },

    /**
     * 重置
     */
    handleReset() {
      this.searchForm = {
        userId: null,
        merchantId: null,
        adPlatform: null,
        adType: null,
        isComplete: null,
        beginTime: null,
        endTime: null
      }
      this.pagination.current = 1
      this.loadData()
    },

    /**
     * 查看详情
     */
    async handleView(row) {
      try {
        // 如果当前行数据已经包含分佣信息，直接使用
        if (row.commissionList && row.commissionList.length > 0) {
          this.detailData = row
          this.detailDialogVisible = true
          return
        }
        
        // 否则调用详情接口获取完整信息
        const response = await getAdWatchLogDetail(row.id)
        if (response.code === 0) {
          // 根据接口文档，详情接口返回单个对象
          // 如果详情接口也支持 includeCommission，可以在这里添加参数
          this.detailData = response.data || row
          this.detailDialogVisible = true
        } else {
          // 如果详情接口失败，使用当前行数据
          this.detailData = row
          this.detailDialogVisible = true
          this.$message.warning('获取详情失败，显示当前行数据')
        }
      } catch (error) {
        console.error('获取详情失败:', error)
        // 如果详情接口失败，使用当前行数据
        this.detailData = row
        this.detailDialogVisible = true
        this.$message.warning('获取详情失败，显示当前行数据')
      }
    },

    /**
     * 导出
     */
    async handleExport() {
      try {
        // 使用导出工具进行导出
        const params = this.buildQueryParams()

        // 先获取所有数据（接口返回数组，无需分页）
        this.$message.info('正在准备导出数据，请稍候...')
        const response = await getAdWatchLogList(params)
        
        if (response.code === 0) {
          // 确保 data 是数组
          const allData = Array.isArray(response.data) ? response.data : []

          if (allData.length === 0) {
            this.$message.warning('没有数据可导出')
            return
          }

          // 转换表格列配置为导出配置
          const exportColumns = this.$convertTableColumnsToExport(
            this.tableColumns.filter(col => col.prop && col.prop !== 'actions'),
            {
              adPlatform: (value) => this.getPlatformText(value),
              adType: (value) => this.getAdTypeText(value),
              isComplete: (value) => value === 1 ? '是' : '否',
              rewardAmount: (value) => this.formatAmount(value),
              rewardPoints: (value) => this.formatPoints(value),
              userActualIncome: (value, row) => {
                if (value !== undefined && value !== null) {
                  return `${this.formatPoints(value)} 积分 (≈ ¥${this.formatAmount(row.userActualIncomeYuan || (value / 100))})`
                }
                return '-'
              },
              watchDuration: (value) => value ? value + '秒' : '-'
            },
            {
              excludeProps: ['actions']
            }
          )

          // 导出Excel
          this.$exportToExcel(allData, exportColumns, `广告观看收益日志_${this.formatDate(new Date())}`)
          this.$message.success('导出成功')
        } else {
          this.$message.error(response.msg || '导出失败')
        }
      } catch (error) {
        console.error('导出失败:', error)
        this.$message.error('导出失败，请稍后重试')
      }
    },

    /**
     * 获取平台类型
     */
    getPlatformType(platform) {
      const typeMap = {
        'taku': 'success',
        'pangolin': 'warning'
      }
      return typeMap[platform] || 'info'
    },

    /**
     * 获取平台文本
     */
    getPlatformText(platform) {
      const textMap = {
        'taku': '塔库',
        'pangolin': '穿山甲'
      }
      return textMap[platform] || platform || '未知'
    },

    /**
     * 获取广告类型文本
     */
    getAdTypeText(adType) {
      const textMap = {
        'splash': '开屏',
        'video': '视频',
        'banner': '横幅'
      }
      return textMap[adType] || adType || '未知'
    },

    /**
     * 获取角色类型标签类型
     */
    getRoleType(roleType) {
      const typeMap = {
        1: 'info',      // C端用户
        2: 'warning',   // 业务员
        3: 'success',   // 商家
        4: 'primary',   // 区域代理
        5: 'danger'     // 总公司
      }
      return typeMap[roleType] || 'info'
    },

    /**
     * 获取角色文本
     */
    getRoleText(roleType) {
      const textMap = {
        1: 'C端用户',
        2: '业务员',
        3: '商家',
        4: '区域代理',
        5: '总公司'
      }
      return textMap[roleType] || '未知'
    },

    /**
     * 格式化金额（元转元，保持原样）
     */
    formatAmount(amount) {
      if (!amount && amount !== 0) return '0.00'
      return parseFloat(amount).toFixed(2)
    },

    /**
     * 格式化积分
     */
    formatPoints(points) {
      if (!points && points !== 0) return '0'
      return parseFloat(points).toFixed(2)
    },

    /**
     * 格式化日期
     */
    formatDate(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}${month}${day}`
    }
  }
}
</script>

<style lang="scss" scoped>
.ad-income-log {
  padding: 20px;

  .page-title {
    font-size: 18px;
    font-weight: 600;
    color: #303133;
    display: flex;
    align-items: center;
  }

  .header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .search-form {
    margin-bottom: 20px;
    padding: 20px;
    background-color: #f5f7fa;
    border-radius: 4px;
  }
  .search-form-item {
    margin-bottom: 0;
  }

  .detail-content {
    .info-section {
      margin-bottom: 24px;

      .section-title {
        font-size: 16px;
        font-weight: bold;
        color: #303133;
        margin-bottom: 16px;
        padding-bottom: 8px;
        border-bottom: 2px solid #409EFF;

        i {
          margin-right: 8px;
          color: #409EFF;
        }
      }

      .info-row {
        margin-bottom: 16px;
      }

      .info-item {
        .info-label {
          font-size: 14px;
          color: #909399;
          margin-bottom: 8px;

          i {
            margin-right: 6px;
            color: #409EFF;
          }
        }

        .info-value,
        .item-value {
          font-size: 14px;
          color: #303133;
        }
      }

      &.highlight-section {
        background-color: #f5f7fa;
        padding: 16px;
        border-radius: 4px;

        .highlight-item {
          .highlight-price {
            color: #67C23A;
          }

          .highlight-point {
            color: #409EFF;
          }
        }
      }
    }
  }

  /* 卡片头部样式 */
  .el-card__header {
    padding: 14px 15px 7px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #dee2e6;
    border-radius: 8px 8px 0 0;
  }

  .el-card__header .clearfix {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .amount-value {
    color: #67C23A;
    font-weight: bold;
  }

  .points-value {
    color: #409EFF;
    font-weight: bold;
  }
}
</style>
